<template>
  <div>
    <n-grid x-gap="12" cols="6" item-responsive>
      <n-grid-item span="2">
        <n-card title="文本相似打分工具">
          <template #header-extra>
            <NButton @click="settingHandler"> 高级选项 </NButton>
          </template>
          <z-modal-form
            ref="modalForm"
            title="高级选项"
            :schemas="settingSchemas()"
          >
          </z-modal-form>

          <z-form
            ref="zFormRef"
            :schemas="getSchemas()"
            submitActionText="打分"
          >
          </z-form>
        </n-card>
      </n-grid-item>

      <n-grid-item span="4">
        <z-table
          :title="tableOptions.title"
          :searchSchemas="searchSchemas"
          :tableProps="tableProps"
        >
        </z-table>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script lang="ts" setup>
import ZForm from "@components/Form/ZForm.vue";
import { getSchemas, settingSchemas } from "./data";
import { ref } from "vue";
import ZTable from "@components/Table/ZTable.vue";
import { reactive } from "vue";
import { getColumns, getSearchSchemas } from "./data";

const searchSchemas = getSearchSchemas();

const tableProps: any = reactive({
  bordered: true,
  striped: true,
  columns: getColumns(),
  pagination: false,
});

const tableOptions = reactive({
  title: "任务列表",
});

const modalForm = ref<any>();
const settingHandler = () => {
  modalForm.value!.modal.open();
};

const zFormRef = ref();
</script>
